<html><!DOCTYPE html>
<html>
<head>
    <style>
        button { margin:10px; }
        div { color:blue; font-weight:bold; }
        span { color:red; }
    </style>

    <script src="../../../../../../g.alicdn.com/kissy/k/1.4.7/seed.js" tppabs="http://g.alicdn.com/kissy/k/1.4.7/seed.js" data-config="{combine:true}"></script>
</head>
<body>
 <form>
    <select name="single">
      <option>Single</option>
      <option>Single2</option>
    </select>

<br />
    <select name="multiple" multiple="multiple">
      <option selected="selected">Multiple</option>
      <option>Multiple2</option>

      <option selected="selected">Multiple3</option>
    </select>
<br/>
    <input type="checkbox" name="check" value="check1" id="ch1"/>

    <label for="ch1">check1</label>

    <input type="checkbox" name="check" value="check2" checked="checked" id="ch2"/>

    <label for="ch2">check2</label>
<br />
    <input type="radio" name="radio" value="radio1" checked="checked" id="r1"/>

    <label for="r1">radio1</label>
    <input type="radio" name="radio" value="radio2" id="r2"/>

    <label for="r2">radio2</label>
  </form>
  <p><tt id="results"></tt></p>


<script>
    KISSY.use('node,io',function (S,Node,IO) {
        var $=Node.all,form=$("form");
        function showValues() {
          var str = IO.serialize(form);
          $("#results").text(str);
        }

        $("input").on("click",showValues);
        $("select,input").on("change",showValues);
        showValues();
    });
</script>

</body>
</html>